<div class="updatable-input updatable-input-tags-list">
    <span class="updatable-input-value-wrapper" ng-hide="updatable.updating" ng-click="edit()"
        ng-class="{'tags-list flexwrap': value.length > 0}">
        <span class="updatable-value text-warning" ng-show="!value || value.length === 0"><em>Not Specified</em></span>

        <tag-item ng-repeat="tag in value" value="tag.text"></tag-item>

        <small class="updatable-input-icon" ng-class="{'lg': value.length > 0}">
            <i class="glyphicon glyphicon-pencil"></i>
        </small>
    </span>

    <span ng-show="updatable.updating">
        <div class="form-group">
            <tags-input class="ti-input-sm ti-tag-selector" min-length="2" ng-model="value" placeholder="Add tags"
                replace-spaces-with-dashes="false" template="views/directives/tag-input-item.html"
                tag-class="label-primary">
                <auto-complete ng-if="source" min-length="3" debounce-delay="400" source="source($query)">
                </auto-complete>
            </tags-input>
        </div>
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-sm btn-default" ng-click='update()'>
                <i class="text-success glyphicon glyphicon-ok"></i>
            </button>
            <button type="button" class="btn btn-sm btn-default" ng-click='cancel()'>
                <i class="text-danger glyphicon glyphicon-remove"></i>
            </button>
            <button class="btn btn-sm btn-default" type="button" ng-click="clear()" ng-if="clearable === true">
                <i class="text-danger glyphicon glyphicon-erase"></i>
            </button>
        </div>

        <div class="btn-group btn-group-sm pull-right">
            <button class="btn btn-sm btn-default" type="button" ng-click="$cmp.fromLibrary()">
                <i class="glyphicon glyphicon-plus"></i> Add from Library
            </button>
        </div>
    </span>
</div>
